<template>
  <a-drawer
    :visible="formVisible"
    :width="500"
    :title="isEdit ? '编辑' : '新增'"
    @ok="submit"
    @cancel="close"
  >
    <div>
      <a-form
        ref="formRef"
        :model="form"
        :rules="rules"
        :label-col-props="{ span: 8 }"
        :wrapper-col-props="{ span: 16 }"
      >
        <a-form-item field="closingTime" label="成交时间">
          <a-input v-model="form.closingTime" placeholder="请填写成交时间" />
        </a-form-item>
        <a-form-item
          field="commentStatus"
          label="评价状态0、未评；1、已评；2、已追评"
        >
          <a-input
            v-model="form.commentStatus"
            placeholder="请填写评价状态0、未评；1、已评；2、已追评"
          />
        </a-form-item>
        <a-form-item field="createTime" label="创建时间">
          <a-input v-model="form.createTime" placeholder="请填写创建时间" />
        </a-form-item>
        <a-form-item field="deliveryTime" label="发货时间">
          <a-input v-model="form.deliveryTime" placeholder="请填写发货时间" />
        </a-form-item>
        <a-form-item
          field="deliveryWay"
          label="配送方式1、普通快递；2、上门自提"
        >
          <a-input
            v-model="form.deliveryWay"
            placeholder="请填写配送方式1、普通快递；2、上门自提"
          />
        </a-form-item>
        <a-form-item field="freightAmount" label="运费金额">
          <a-input v-model="form.freightAmount" placeholder="请填写运费金额" />
        </a-form-item>
        <a-form-item field="id" label="">
          <a-input v-model="form.id" placeholder="请填写" />
        </a-form-item>
        <a-form-item field="ipAddr" label="ip地址">
          <a-input v-model="form.ipAddr" placeholder="请填写ip地址" />
        </a-form-item>
        <a-form-item field="isPay" label="是否支付0、未支付 1、已支付">
          <a-input
            v-model="form.isPay"
            placeholder="请填写是否支付0、未支付 1、已支付"
          />
        </a-form-item>
        <a-form-item field="logisticsId" label="物流id">
          <a-input v-model="form.logisticsId" placeholder="请填写物流id" />
        </a-form-item>
        <a-form-item field="name" label="订单名">
          <a-input v-model="form.name" placeholder="请填写订单名" />
        </a-form-item>
        <a-form-item field="orderNo" label="商户订单号，用于与第三方系统交互">
          <a-input
            v-model="form.orderNo"
            placeholder="请填写商户订单号，用于与第三方系统交互"
          />
        </a-form-item>
        <a-form-item
          field="orderType"
          label="订单类型（0、普通订单；1、秒杀订单）"
        >
          <a-input
            v-model="form.orderType"
            placeholder="请填写订单类型（0、普通订单；1、秒杀订单）"
          />
        </a-form-item>
        <a-form-item
          field="paymentAmount"
          label="支付金额（销售金额+运费金额-积分抵扣金额）"
        >
          <a-input
            v-model="form.paymentAmount"
            placeholder="请填写支付金额（销售金额+运费金额-积分抵扣金额）"
          />
        </a-form-item>
        <a-form-item field="paymentTime" label="付款时间">
          <a-input v-model="form.paymentTime" placeholder="请填写付款时间" />
        </a-form-item>
        <a-form-item field="paymentType" label="支付类型1、微信；2、支付宝">
          <a-input
            v-model="form.paymentType"
            placeholder="请填写支付类型1、微信；2、支付宝"
          />
        </a-form-item>
        <a-form-item field="paymentWay" label="支付方式">
          <a-input v-model="form.paymentWay" placeholder="请填写支付方式" />
        </a-form-item>
        <a-form-item field="receiverTime" label="收货时间">
          <a-input v-model="form.receiverTime" placeholder="请填写收货时间" />
        </a-form-item>
        <a-form-item field="remark" label="备注">
          <a-input v-model="form.remark" placeholder="请填写备注" />
        </a-form-item>
        <a-form-item field="salesAmount" label="销售金额">
          <a-input v-model="form.salesAmount" placeholder="请填写销售金额" />
        </a-form-item>
        <a-form-item field="shopId" label="店铺ID">
          <a-input v-model="form.shopId" placeholder="请填写店铺ID" />
        </a-form-item>
        <a-form-item
          field="status"
          label="订单状态1待发货； 2待收货； 3已完成； "
        >
          <a-input
            v-model="form.status"
            placeholder="请填写订单状态1待发货； 2待收货； 3已完成； "
          />
        </a-form-item>
        <a-form-item field="transactionId" label="支付交易ID">
          <a-input
            v-model="form.transactionId"
            placeholder="请填写支付交易ID"
          />
        </a-form-item>
        <a-form-item field="updateTime" label="最后更新时间">
          <a-input v-model="form.updateTime" placeholder="请填写最后更新时间" />
        </a-form-item>
        <a-form-item field="userId" label="用户id">
          <a-input v-model="form.userId" placeholder="请填写用户id" />
        </a-form-item>
        <a-form-item field="userMessage" label="买家留言">
          <a-input v-model="form.userMessage" placeholder="请填写买家留言" />
        </a-form-item>
      </a-form>
    </div>
  </a-drawer>
</template>

<script lang="ts" setup>
  import { Message } from '@arco-design/web-vue';
  import { computed, ref } from 'vue';
  import { useRequest } from 'vue-request';
  import { useVisible } from '@/hooks/visible';
  import { addOrderInfo, updateOrderInfo } from '@/api/mall/orderinfo';

  const formRef = ref();

  const initData = () => {
    return {
      closingTime: '',
      commentStatus: '',
      createTime: '',
      deliveryTime: '',
      deliveryWay: '',
      freightAmount: '',
      id: '',
      ipAddr: '',
      isPay: '',
      logisticsId: '',
      name: '',
      orderNo: '',
      orderType: '',
      paymentAmount: '',
      paymentTime: '',
      paymentType: '',
      paymentWay: '',
      receiverTime: '',
      remark: '',
      salesAmount: '',
      shopId: '',
      status: '',
      transactionId: '',
      updateTime: '',
      userId: '',
      userMessage: '',
    };
  };

  const rules = {
    createTime: [
      {
        required: true,
        message: '创建时间不能为空',
      },
    ],

    deliveryWay: [
      {
        required: true,
        message: '配送方式1、普通快递；2、上门自提不能为空',
      },
    ],

    freightAmount: [
      {
        required: true,
        message: '运费金额不能为空',
      },
    ],

    id: [
      {
        required: true,
        message: '不能为空',
      },
    ],

    isPay: [
      {
        required: true,
        message: '是否支付0、未支付 1、已支付不能为空',
      },
    ],

    orderNo: [
      {
        required: true,
        message: '商户订单号，用于与第三方系统交互不能为空',
      },
    ],

    paymentAmount: [
      {
        required: true,
        message: '支付金额（销售金额+运费金额-积分抵扣金额）不能为空',
      },
    ],

    paymentType: [
      {
        required: true,
        message: '支付类型1、微信；2、支付宝不能为空',
      },
    ],

    paymentWay: [
      {
        required: true,
        message: '支付方式不能为空',
      },
    ],

    salesAmount: [
      {
        required: true,
        message: '销售金额不能为空',
      },
    ],

    updateTime: [
      {
        required: true,
        message: '最后更新时间不能为空',
      },
    ],

    userId: [
      {
        required: true,
        message: '用户id不能为空',
      },
    ],
  };

  const props = defineProps({
    visible: {
      type: Boolean,
      default: false,
    },
    formData: {
      type: Object,
      default: () => {
        return {};
      },
    },
  });

  const emit = defineEmits<{
    (e: 'update:visible', v: boolean): void;
    (e: 'refresh'): void;
  }>();

  const form = ref(props.formData);

  const { formVisible, close, open } = useVisible(props, emit);

  // 判断是编辑还是新增
  const isEdit = computed(() => !!form.value.id);

  const submit = async () => {
    formVisible.value = true;
    const validate = await formRef.value.validate();
    if (!validate) {
      if (isEdit.value) {
        await updateOrderInfo(form.value).then(() => {
          Message.success('修改成功');
        });
      } else {
        await addOrderInfo(form.value).then(() => {
          Message.success('添加成功');
        });
      }
      form.value = { ...initData };
      formVisible.value = false;
      emit('refresh');
    }
  };

  open(() => {
    const { id } = props.formData;
    if (id) {
      form.value = props.formData;
    } else {
      form.value = initData();
    }
  });
</script>
